<template>
  <div class="app-container">
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="pd" ref="pd">
        <el-form-item prop="glmc">
          <el-input v-model="pd.glmc"  placeholder="攻略名称" style="width:300px;"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"  @click="fetchData">查询</el-button>  <!--icon="el-icon-search"-->
        </el-form-item>
        <el-form-item>
          <el-button  @click="resetForm('pd')">重置</el-button>
        </el-form-item>

<br>
        <el-form-item><!--@click="handleAdd" icon="el-icon-edit"-->
          <router-link :to="{name:'editStrategy' }"> <el-button type="primary"  icon="el-icon-plus"  >发布攻略  </el-button></router-link>
        </el-form-item>
      </el-form>

    </el-col>

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row>
      <el-table-column align="center" label="攻略编号" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column label="图标" width="260" align="center" :show-overflow-tooltip=true>
        <template slot-scope="scope" >
          <span  v-if="scope.row.gltp!=''">
             <img :src="scope.row.gltp.split(',')[0]"  min-width="70" height="70" />
          </span>
          <span v-else>
            <!--<img src="../../icons/zwtp.png"  min-width="70" height="70" />-->
          </span>

          </template>
      </el-table-column>
      <el-table-column label="攻略名称" width="400" align="center" :show-overflow-tooltip=true  >
        <template slot-scope="scope">
          <span>{{ scope.row.glmc }}</span>
        </template>
      </el-table-column>
      <el-table-column label="攻略简介" width="300" align="center" :show-overflow-tooltip=true>
        <template slot-scope="scope">
          <span>{{ scope.row.gljj }}</span>
        </template>
      </el-table-column>


      <el-table-column align="center" prop="created_at" label="创建时间" width="200">
        <template slot-scope="scope">
          <i class="el-icon-time"/>
          <span>{{ scope.row.cjsj }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="排序号" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.pxh }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template scope="scope">
          <el-button type="primary" size="mini" @click="handleEdit(scope)">编辑
      <!--      <router-link  type="button"  :to="{name:'editScenicspot', query: {id:scope.row.id} }">编辑</router-link> -->
          </el-button>
        <!--  <router-link :to="{name:'editScenicspot'}">去B页面</router-link> <br/>
          <router-link :to="{name:'editScenicspot', params: {id:scope.row.id}}">去B页面，params传入参数</router-link> <br/>
           -->

          <el-button size="mini" type="danger" @click="handleDel(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <!--<el-button :disabled="users.length===0" type="danger" @click="batchRemove">批量删除</el-button>-->
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="showCount"
        :page-count="totalPage"
        :total="totalResult"
        style="float:right;"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>

    </el-col>

  </div>

</template>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

<script>
import util from '@/common/js/util'
import { findAllStrategylistPage ,findStrategyById,delStrategy} from '@/api/strategy'
export default {

  data() {
    return {
      imageUrl: '',
      currentPage: 1,
      currentResult: 0,
      entityOrField: true,
      pageStr: 'string',
      pd: {
        glmc: ''
      },
      showCount: 5,
      totalPage: 0,
      totalResult: 0,
      list: [],
      fileList: [],
      listLoading: true,

      value3: true,
      value4: true,
      dicts: [],

    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    // 是否启用转换
    formatScbj: function(row, column) {
      return row.scbj === 1 ? '未启用' : row.scbj === 0 ? '已启用' : '未知'
    },
    formatScbjValue: function(value) {
      return value === 1 ? '未启用' : value === 0 ? '已启用' : '未知'
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleCurrentChange(currentPage) {
      console.log(`当前页: ${currentPage}`)
      this.currentPage = currentPage
      this.fetchData()
    },
    handleSizeChange(showCount) {
      console.log(`每页 ${showCount} 条`)
      this.showCount = showCount
      this.fetchData()
    },
    // 列表
    fetchData() {
      const page = {
        currentPage: this.currentPage,
        currentResult: 0,
        entityOrField: true,
        pageStr: 'string',
        pd: {
          glmc: this.pd.glmc
        },
        showCount: this.showCount,
        totalPage: 0,
        totalResult: 0
      }
      this.listLoading = true
      findAllStrategylistPage(page).then(response => {
        if (response.data.reason === null) {
          this.currentPage = response.data.result.page.currentPage
          this.totalPage = response.data.result.page.totalPage
          this.totalResult = response.data.result.page.totalResult
          this.list = response.data.result.list
          // this.page = response.data.result.page
          this.listLoading = false
        } else {
          this.loading = false
          console.log("错误");
          this.$message({
            message: response.data.reason.text,
            type: 'error'
          })
        }
      })
    },

    handleEdit:function(item){
      let id = item.row.id;
      let self =this;
      console.log('---id',id),

        /*3种传参方式*/
      // this.$router.push({
      //   path: `/editScenicspot/${row.id}`,
      // })
      // this.$router.push({
      //   name: 'editScenicspot',
      //   params: {
      //     id: row.id
      //   }
      // })
      self.$router.push({
        path: 'editStrategy',
        query: {
          id: id
        }
      })

    },


    //删除
    handleDel: function (index, row) {
      console.log('删除',index);
      console.log('删除row',row);
      this.$confirm('确认删除该记录吗?', '提示', {
        type: 'warning'
      }).then(() => {
        this.listLoading = true;
        //NProgress.start();
        let para = { id: row.id };
        delStrategy(para).then((res) => {
          this.listLoading = false;
          //NProgress.done();
          this.$message({
            message: '删除成功',
            type: 'success'
          });
          this.fetchData();
        });
      }).catch(() => {

      });
    },

    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      // this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      this.$message.warning(`最多可上传 3 个文件！`);
    },
    beforeRemove(file, fileList) {
      return true;
      // return this.$confirm(`确定移除 ${ file.name }？`);
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isGIF = file.type === 'image/gif';
      const isPNG = file.type === 'image/png';
      const isBMP = file.type === 'image/bmp';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传图片必须是JPG/GIF/PNG/BMP 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!');
      }
      return (isJPG || isBMP || isGIF || isPNG) && isLt2M;
    }


  }
}
</script>
